<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<div class="well">
    <form name="sideForm" action="checkability.htm" method="post">
        <h4>Online Booking</h4>
        <hr class="soft"/>
        <label>Check in</label>
        <input class="span2" value="" id="dpd1" type="text" data-date-format="dd/mm/yyyy" readonly="true">
        <label>Check out</label>
        <input class="span2" value="" id="dpd2" type="text" data-date-format="dd/mm/yyyy" readonly="true">
        <label>Room type</label>
        <select id="subject" name="subject" class="span2">
            <option value="na" selected="">Choose One:</option>
            <option value="service">Rendezvous Single</option>
            <option value="suggestions">Rendezvous Double</option>
            <option value="product">Rendezvous Twin</option>
        </select>
        <br>
        <button name="CheckAbility" type="submit" class="btn btn-primary pull-right">Check Ability</button>
        <br>
    </form>
</div>

<!--                        <div class="well well-small">
                            <center>
                                <div id="TA_certificateOfExcellence615" class="TA_certificateOfExcellence">
                                    <ul id="6iMtbj" class="TA_links ZGAJbMKrA80">
                                        <li id="2Q6wRCrV" class="Kupi40mR">
                                            <a target="_blank" href="http://www.tripadvisor.com/"><img src="http://www.tripadvisor.com/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor" class="widCOEImg" id="CDSWIDCOELOGO"/></a>
                                        </li>
                                    </ul>
                                </div>
                                <script src="http://www.jscache.com/wejs?wtype=certificateOfExcellence&amp;uniq=615&amp;locationId=1629341&amp;lang=en_US&amp;year=2014"></script>
                            </center>
                        </div>-->

<!--                        <div class="well well-small">
                            <center>
                                <div id="TA_selfserveprop825" class="TA_selfserveprop" >
                                    <ul id="cuPEfg8Bfy" class="TA_links 7JlNa6">
                                        <li id="SgaYzc0" class="fNmNFIWog7">
                                            <a target="_blank" href="http://www.tripadvisor.com/"><img src="http://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
                                        </li>
                                    </ul>
                                </div>
                                <script src="http://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=825&amp;locationId=1629341&amp;lang=en_US&amp;rating=true&amp;nreviews=5&amp;writereviewlink=true&amp;popIdx=true&amp;iswide=false&amp;border=true"></script>


                            </center>
                        </div>-->
<div class="well well-small">
    <center>
        <a target="_blank" href="http://www.lonelyplanet.com"><img src="themes/images/loney_logo.png" alt="TripAdvisor"/></a>
    </center>
</div>

<script>
	
    $(function(){
        // disabling dates
        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

        var checkin = $('#dpd1').datepicker({
            onRender: function(date) {
                return date.valueOf() < now.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function(ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.hide();
            $('#dpd2')[0].focus();
        }).data('datepicker');
        var checkout = $('#dpd2').datepicker({
            onRender: function(date) {
                return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function(ev) {
            checkout.hide();
        }).data('datepicker');
    });
</script>